<template>
	<view class="page">

		<uni-card title="订单详情信息" isShadow>
			<view v-if="authentication.IDCARD" class="page-section-spacing">
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
					<swiper-item v-for="(item,index) in authentication.IDCARD" :key="index">
						<image @click="previewImage(authentication.IDCARD,index)" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<uni-list>
				<uni-list-item title="类型:" :rightText="getState(authentication.authenticationState)" />
				<uni-list-item title="姓名:" :rightText="authentication.nickName" />
				<uni-list-item title="手机号:" :rightText="authentication.mobile" />
			</uni-list>
		</uni-card>
		
		<button type="primary" v-if="authentication.authenticationState==1" @click="confirmUser" style="background-color: #31b977;margin: 15px;">确认审核</button>
		<button type="primary" v-if="authentication.authenticationState==1" @click="rejectUser"  style="background-color: #31b977;margin: 15px;">驳回</button>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		data() {
			return {
				authentication: {},
				user: {}
			}
		},
		onLoad(data) {
			this.user._id = data.id
		},
		onShow() {
			this.$api("user-center", "getUserById", {_id: this.user._id}).then(res=>{
				this.authentication={...res.data[0].authentication,authenticationState:res.data[0].authenticationState}
				
			})
		},
		methods: {
			getState(state){
				switch(state){
					case 1: 
					return "待审核"
					break;
					case 2:
					return "已审核"
					break;
					case 3:
					return "已驳回"
					break;
				}
			},
			confirmUser() {
				//确认审批
				this.$api("user-center", "updUserById", {_id: this.user._id,authenticationState:2}).then(res=>{
					this.$msg("已确认审批")
				})
			},
			rejectUser(){
				uni.navigateTo({
					url:'../user/myIssue?id='+this.user._id
				})
			},
			//预览图片
			previewImage(list, index) {
				console.log(list,index)
				uni.previewImage({
					current: index,
					urls: list,
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/components/iview/mixin.scss';

	.page-section-spacing {
		width: 100%;
	}

	.swiper {
		height: 400upx;
		width: 100%;
	}

	// swiper-item 里面的图片高度
	swiper-item image {
		width: 100%;
		height: 400upx;
		border-radius: 20upx 20upx 0 0;
	}

	.page {
		height: 100%;

		.message {
			width: 100%;
			box-shadow: 0px 2upx 16upx 0px rgba(0, 0, 0, 0.06);
			position: fixed;
			top: 0px;
			background-color: #FFFFFF;

			&-title {

				padding-left: 30upx;
				padding-right: 30upx;

				&-span {
					height: 70upx;
					font-size: 50upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: rgba(34, 34, 34, 1);
					line-height: 70upx;
				}
			}

			&-tab {
				padding-left: 30upx;
				padding-right: 30upx;
				display: flex;

				&-item {
					&-badge {}
				}
			}
		}

		.message-tabs {
			background-color: #FFFFFF;
		}

		.message-content {
			margin-top: 75rpx;
			height: calc(100% - 280rpx);
			overflow-y: scroll;

			.message-card {
				display: flex;
				margin: 30upx 30upx 0;
				position: relative;
				width: calc(100% - 30px);

				&-topRight {
					position: absolute;
					right: 20upx;
					top: 30upx;
					width: 130upx;
					background: #F0AD4E;
					color: #FFFFFF;
					height: 36upx;
					line-height: 36upx;
					font-size: 26upx;
					text-align: center;
					border-radius: 12upx;
				}

				&-left {
					width: 70upx;
					height: 70upx;
					font-size: 32upx;
					display: inline-block;
					text-align: center;
					line-height: 70upx;
					border-radius: 50%;
					color: white;
					background: rgba(74, 134, 236, 1);
				}

				&-right {
					flex: 1;
					position: relative;
					padding: 22upx 22upx;
					border: 2upx solid #E3E7EB;
					border-radius: 12upx;
					width: calc(100% - 30px);

					&-arrow {
						position: absolute;
						width: 18upx;
						height: 39upx;
						left: -18upx;
						top: 60upx;
						z-index: 111;
						background-size: 100% 100%;

					}

					&-content {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 42upx;
						display: flex;
						text-align: center;
						padding: 14upx 10upx 0px;

						&-item {
							flex: 1;
						}
					}

					&-btns {
						display: flex;
						position: relative;
						margin-top: 20upx;
						font-size: 32upx;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 60upx;
						padding-top: 15upx;
						padding-left: 20upx;
						padding-right: 20upx;

						&:after {
							@include hairline();
							border-top-width: 1px;
						}

						&-divider {
							width: 1upx;
							background: #E3E7EB;
							height: 48upx;
						}

						&-reject {
							flex: 1;
							display: flex;
							justify-content: center;

							&-btn {
								width: 200upx;
								background: #FF4259;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}

						}

						&-agree {
							flex: 1;
							display: flex;
							justify-content: center;

							&-btn {
								width: 200upx;
								background: #31b977;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}
						}
					}

					&-info {
						font-size: 28upx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						line-height: 40upx;

						&-time {
							display: inline-block;
							font-size: 28upx;
							font-weight: 400;
							color: rgba(34, 34, 34, 1);
						}
					}

					&-title {
						display: flex;

						// justify-content: space-between;
						align-items: center;

						&-left {
							font-size: 34upx;
							font-weight: 400;
							color: #222222;
							flex: 1;

							span {
								color: #4A86EC;
							}
						}

						&-right {
							font-size: 32upx;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}

	}
</style>
